import React from 'react'

function Dialog(props){
  return <div style={{border: `4px solid ${props.color || "blue"}`}}>{props.children}</div>
}
function WelcomeDialog(props){
  return (
    <Dialog {...props}>
      <h1>welcome</h1>
      <p>欢迎使用react</p>
    </Dialog>
  )
}

function RadioGroup(props){
  return (
    <div>
      {React.Children.map(props.children, child => {
        // vdom不可修改，克隆一个新的去改才可以
        // child.props.name  = props.name;
        // return child;
        return React.cloneElement(child, {name:props.name})
      })}
    </div>
  )
}

function Radio({children, ...rest}){
  return (
    <label>
      <input type="radio" {...rest} />
      {children}
    </label>
  )
}


// function Filter({type, children}){
//   return (
//     <div>
//       {React.Children.map(children, child => {
//         if(child.type !== type){
//           return;
//         }
//         return child
//       })}
//     </div>
//   )
// }

function Fetcher(props){
  const user = {name: 'jerry', age: 20}
  return props.children(user)
}

export default function(){
  return (
    <div>
      <WelcomeDialog color="green" />
      <Fetcher name="getUser">
        {({name, age}) => (
          <p>
            {name}-{age}
          </p>
        )}
      </Fetcher>
      <RadioGroup name="mvvm">
        <Radio value="vue">vue</Radio>
        <Radio value="react">react</Radio>
        <Radio value="angular">angular</Radio>
      </RadioGroup>
    </div>
  )
}
